
<template>
    <div class="policyResult">
        <product-title></product-title>
        <div class="wraper">
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme">
                        <Table ref="currentRowTable2" size="large" stripe border :columns="columns2" :data="policylist2" class=""></Table>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <Row class="pro-pagesize">
                <Col :md="24" :lg="24">
                <Page class="fr page" :total="allTotal2" ref='pages2' :current="currentpage2" show-total show-sizer :page-size="pagesize2" @on-change="pageChange2" @on-page-size-change="pageSizeChange2" placement="top"></Page>
                </Col>
            </Row>
        </div>
        <div class="echart-class" id="Echart" style="height:500px;">

        </div>
    </div>
    </div>
</template>
<script>
import productTitle from "../../components/productTitle";
import echarts from "echarts";
import { parteGetByName } from "../../api/parter";
import { getListByName } from "../../api/yun_org";
import { getRankList } from "../../api/rank";
import { statisticsOrg } from "../../api/policy";
export default {
    data() {
        return {
            showAddModal: false, //点击设置,弹出模态框
            closeable: false, //shif按ese按钮退出
            allTotal: 0,
            pagesize: 10,
            p: 1,
            currentpage: 1,
            tableaction: false,
            currentRow: {},
            columns: [
                {
                    title: "工号",
                    key: "shortn",
                    align: "center"
                },
                {
                    title: "业务员",
                    key: "agency_code",
                    align: "center"
                },
                {
                    title: "机构名称",
                    key: "tel",
                    align: "center"
                },
                {
                    title: "职级",
                    key: "principal",
                    align: "center"
                },
                {
                    title: "保费(元)",
                    key: "reg_date",
                    align: "center"
                },
                {
                    title: "保费类型",
                    key: "status",
                    align: "center"
                },
                {
                    title: "保单件数",
                    key: "registe_addr",
                    align: "center"
                },
                {
                    title: "活动人力",
                    key: "cate",
                    align: "center"
                }
            ],
            policylist: [],
            rankList: [],
            searchForm: {
                p: 1,
                pagesize: 10,
                name: "",
                policy_cid: "",
                yun_org_mid: "",
                daterangetime: [],
                daterange: [],
                dateChbaoTime: "", //承包时间
                dateChbao: "",
                policy_type: "", //保费类型
                status: "", //保单状态
                cname: "", //险种名称
                rank_id: "", //职级
                premium_star: "",
                premium_end: ""
            },
            comoptions: [],
            orglist: [],
            columns2: [
                {
                    title: "工号",
                    key: "shortn",
                    align: "center"
                },
                {
                    title: "业务员",
                    key: "agency_code",
                    align: "center"
                },
                {
                    title: "交费期间",
                    key: "tel",
                    align: "center"
                },
                {
                    title: "保费(元)",
                    key: "reg_date",
                    align: "center"
                },
                {
                    title: "保费类型",
                    key: "status",
                    align: "center"
                },
                {
                    title: "险种名称",
                    key: "registe_addr",
                    align: "center"
                },
                {
                    title: "保额(元)",
                    key: "reg_date",
                    align: "center"
                },
                {
                    title: "保险公司",
                    key: "cname",
                    align: "center"
                }
            ],
            policylist2: [],
            modalTable: {
                p: 1,
                pagesize: 10
            },
            allTotal2: 0,
            pagesize2: 10,
            p2: 1,
            currentpage2: 1,
            echartObj: {},
            edata: [],
            color: [
                "#e0f6e0",
                "#b0e7b0",
                "#89da8e",
                "#77d47f",
                "#3fd960",
                "#5dcb68",
                "#2acd4c",
                "#38af2f",
                "#2c992c",
                "#277b31"
            ]
        };
    },
    components: {
        productTitle
    },
    mounted() {
        var _this = this;
        _this.myChart = echarts.init(document.getElementById("Echart"));
        _this.myChart.setOption({
            title: {
                text: "保单业绩数据图"
            },
            tooltip: {
                trigger: "axis"
            },
            legend: {
                data: ["1", "2"]
            },
            // toolbox: {
            //     //是否可以切换其他图形显示
            //     show: false,
            //     feature: {
            //         dataView: { show: true, readOnly: false },
            //         magicType: { show: true, type: ["line", "bar"] },
            //         restore: { show: true },
            //         saveAsImage: { show: true }
            //     }
            // },
            calculable: true,
            xAxis: [
                {
                    type: "category",
                    data: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月"
                    ]
                }
            ],
            yAxis: [
                {
                    type: "value"
                }
            ],
            series: [
                {
                    name: "1",
                    type: "bar",
                    data: [
                        2.0,
                        4.9,
                        7.0,
                        23.2,
                        25.6,
                        76.7,
                        135.6,
                        162.2,
                        32.6,
                        20.0,
                        6.4,
                        3.3
                    ],
                    itemStyle: {
                        normal: {
                            color: "gold"
                        }
                    },
                    markLine: {
                        data: [{ type: "average", name: "平均值" }]
                    }
                },
                {
                    name: "2",
                    type: "bar",
                    data: [
                        2.6,
                        5.9,
                        9.0,
                        26.4,
                        28.7,
                        70.7,
                        175.6,
                        182.2,
                        48.7,
                        18.8,
                        6.0,
                        2.3
                    ],
                    itemStyle: {
                        normal: {
                            color: "cyan"
                        }
                    },
                    markLine: {
                        data: [{ type: "average", name: "平均值" }]
                    }
                }
            ]
        });
    },
    updated() {},
    created() {},
    computed: {
        slidetoggle() {
            return this.$store.state.sildeshow;
        }
    },
    methods: {
    }
};
</script>































<style scoped>
.policyResult .all {
    text-align: right;
    padding-right: 15px;
}
.policyResult .wraper {
    padding: 0 20px 60px 20px;
}

.policyResult .search-form {
    overflow: hidden;
}

.policyResult search {
    padding-bottom: 20px;
}

.policyResult .search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.policyResult .search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.policyResult .top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}

.policyResult .wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.policyResult .wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.policyResult .iconfont {
    font-size: 14px;
}

.policyResult .red-font {
    color: #ff1f1f;
}

.policyResult .fixed-bottom {
    padding-left: 20px;
    padding-right: 20px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}

.policyResult .sidehide {
    left: 75px;
}

/* 表格样式 start*/

.policyResult .pro-card {
    margin-bottom: 10px;
}

.policyResult .pro-card-head {
    background-color: #e6e7eb;
    line-height: 38px;
    border: 1px solid #ddd;
}

.policyResult .pro-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.policyResult .pro-card-headr {
    padding-right: 10px;
    text-align: right;
}

.policyResult .pro-card-content {
    clear: both;
}

.policyResult .pro-paramname {
    text-align: center;
    background-color: #e6e7eb;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
}

.policyResult .pro-paramvalue {
    padding-left: 10px;
    border-right: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.policyResult .policyResult .pro-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* 表格样式  end */

/* 分页 start */

.policyResult .page {
    margin: 0;
}

.policyResult .ivu-page {
    padding-bottom: 150px;
}

/* 分页 end */

.policyResult .receiptbox {
    padding: 10px;
    background-color: #edf2f6;
}

.policyResult .receiptbox .ivu-input-group-append button {
    background-color: #19be6b;
    color: #fff;
}

.policyResult .receiptbox .ivu-input-group {
    top: 0;
}

.policyResult .receiptbox-upload {
    position: relative;
}

.policyResult .receiptbox-upload-input {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

.policyResult .receiptbox .ivu-tag {
    vertical-align: middle;
}

.renewal-box {
    margin-left: -16px;
    margin-right: -16px;
    padding: 16px;
    padding-bottom: 0;
    background-color: #cfebf9;
    overflow: hidden;
}

.policyResult .renewal-pro {
    margin-left: -16px;
    margin-right: -16px;
    padding: 12px;
    height: 395px;
    overflow-y: auto;
}

.policyResult .renewal-pro-title {
    padding-left: 15px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    background-color: #edf2f6;
    margin-bottom: 10px;
}

.policyResult .renewal-pro-title b {
    display: inline-block;
    margin-left: 20px;
}

.policyResult .renewal-pro-checkbox {
    font-size: 14px;
    padding-left: 15px;
    border: 1px solid #edf2f6;
    height: 50px;
    line-height: 50px;
    margin-bottom: 10px;
}

.policyResult .renewal-pro-price {
    color: #ff4848;
    font-size: 16px;
    padding-right: 15px;
}

.policyResult .renewal-footer {
    margin: -12px -18px;
    padding: 12px 18px;
    background-color: #f2f2f2;
    overflow: hidden;
}

.policyResult .renewal-footer-l {
    float: left;
}

.renewal-footer-r {
    float: right;
}

.policyResult .renewal-total {
    padding-left: 15px;
    color: #ff3d3d;
    font-size: 25px;
}

.policyResult .mod_table {
    margin-right: 22px;
    margin-top: 20px;
    height: 50px;
}
</style>
<style>
.policyResult .a-link {
    color: #4074e1;
    text-decoration: underline;
    cursor: pointer;
}

.policyResult .ivu-table-row-highlight .a-link {
    color: #fff;
}

.policyResult .receiptbox .ivu-tag span.ivu-tag-text {
    max-width: 260px;
    overflow: hidden !important;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.policyResult .receiptbox .ivu-tag span.ivu-tag-dot-inner,
.policyResult .receiptbox .ivu-tag i {
    vertical-align: middle;
}
.policyResult .modal .ivu-date-picker-rel:after,
.policyResult .modal .ivu-select:after {
    height: 32px;
}
</style>

